import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react'
import moment from 'moment';

class RecentSevenDays extends Component {
    componentDidUpdate() {
        this.getOption();
    }
    getOption = () => {
        const { ordersInRecentSevenDays } = this.props;
        var data = { num1: [], numx: [] };
        ordersInRecentSevenDays.map((item) => {
            {
                data.num1.push(item.number);
                data.numx.push(moment(item.time).format('MM-DD'));
            }
        });
        var colors = ["rgb(230, 160, 10)", "#d14a61", "#000000	", "#DCDCDC"];
        let option = {
            title: {
                text: '近七日订单量',
                textStyle: {
                    fontSize: 13,
                    color: 'rgb(233, 111, 10)'
                },
                textBaseline: "top",//默认就好,垂直对齐方式,不要设置
                left: 40
            },
            color: ['rgb(233, 111, 10)'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {

                y: "30%", // y 偏移量
                x: "6%",
                height: "50%",// 高度
                width: "90%",
            },
            xAxis: {
                type: 'category',
                data: data.numx,
            },
            yAxis: {
                type: 'value',
                data: data.num1,
            },
            series: [
                {
                    data: data.num1,
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    areaStyle: {},

                },

            ]
        };
        return option;
    }
    render() {
        return (
            <div>
                <ReactEcharts
                    option={this.getOption()}
                    style={{ width: '40vw', height: '35vh' }}
                />
            </div>
        )


    }
}

export default RecentSevenDays;